<#assign menuId=3>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>打样生产通知单-${Application.systemName!}</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- bootstrap 3.0.2 -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <link href="../css/myself.css" rel="stylesheet" type="text/css" />
    <link href="../css/sweet-alert.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <style type="text/css">
        ul li{
            list-style: none;
            margin-top: 10px;
        }
        .pull-left{
            border-left: 6px solid #3882FF;
            padding: 0 5px;
            font-size:14px;
            font-weight: bold;
            margin: 10px 0 15px 0;
        }
        .custormView{
            margin-top: 10px;
        }
        table tr th{
            text-align: center;
        }
        .p_center{
            text-align: center !important;
        }
        .center_text{
        	background: #ddd;
        }
        .p_left{text-align: left !important;}
        .btn_white{background:white;border: 1px solid #cfd8e3;color: #747e8d;}
        .btn_white:hover{background:white;border: 1px solid #3794ff;color: #56a4ff;}
        .btn{padding: 6px 30px;}
        .top_header{font-size: 26px;border-bottom: 3px solid black;padding: 10px 0;margin-bottom: 30px;}
   		.Design_draft img{
   			width: 100%;
   			height: 100%;  
   		} 
   		.particulars tr th, .particulars tr td{
   			border: 1px solid #ccc;
   		}
   		.particulars{
   			margin-bottom: 10px;
   			width: 100%;
   		}
   		
   		
   		.float_L li{
   			width: 25%;
   			float: left;
   		}
    </style>
</head>
<body class="skin-blue">
<div class="wrapper row-offcanvas row-offcanvas-left" style="width: 70%;margin: 0 auto;">
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="clearfix search-div center">
                        	<#list proofingPatterns as proofing>
                            <form class="clearfix" action="#" method="get" style="padding: 3rem;">
                                <div class="p_center top_header clearfix">
                                    <img class="fl" src="../images/logo_black_03.jpg"/>
                                    打样生产通知单
                                </div>
                                <div>
                                    <span class="pull-left">订单信息</span>
                                </div>
                                <table class="table table-bordered custormView" >
                                    <tr>
                                        <td class="p_center" style="border: 0; width: 25%;">
                                            订单号: ${proofingOrder.code!}
                                        </td>
                                        <td style="border: 0; width: 25%;">
                                            创建时间: ${proofingOrder.createAt?string("yyyy/MM/dd HH:mm")}
                                        </td>
                                        <td style="border: 0; width: 25%;">
                                            截止时间: ${proofingOrder.endDate?string("yyyy/MM/dd")}
                                        </td>
                                        <td style="border: 0; width: 25%;"></td>
                                    </tr>
                                    <tr>
                                        <td class="p_center" style="border: 0; width: 25%;">
                                           客户名称: ${proofingOrder.customerName!}
                                        </td>
                                        <td style="border: 0; width: 25%;">
                                           客户编号: ${proofingOrder.customerCode!}
                                        </td>
                                        <td style="border: 0; width: 25%;">

                                        </td>
                                        <td style="border: 0; width: 25%;"></td>
                                    </tr>
                                </table>
                                <#if proofingOrder.participants?size!=0>
                                <div class="clear" style="clear: both"></div>
                                <div class="pull-left">人员信息</div>
                               
                                
                               <table class="table table-bordered custormView" >
                               		<tr>
                               			<td style="padding: 0 8px">
                               				<ul class="clearfix float_L">
	                               				<#list proofingOrder.participants as participant>
			                                        <li>${participant.roleName!}：</li>
			                                        <li>${participant.name!}</li>
			                                    </#list>
                               				</ul>
                               			</td>
                               		</tr>
                                	<!-- <tr>
                                		<#list proofingOrder.participants as participant>
	                                    <td class="third p_center" style="border: 0;width: 25%">
	                                        ${participant.roleName!}：${participant.name!}
	                                    </td>
	                                    </#list>
                                	</tr> -->
                                	
                                </table>
                                </#if>
                                <div class="pull-left">客户需求</div>
                                <table class="table table-bordered custormView" >
                                    <tr>
                                        <td style="padding: 2em 4em;">${proofingOrder.requirement!}</td>
                                    </tr>
                                </table>
                                <div class="pull-left">样衣信息</div>
                                <table class="table text-center table-bordered order-list">
                                    <tr>
                                        <td colspan="5" class="left-text">
                                            <span style="margin-right: 50px;">子订单号：${proofing.code!}</span>
                                            <span>设计款号:${proofing.patternNo!}</span>
                                        </td>
                                    </tr>
                                    <td width="50%">
                                        <span class="Design_draft"><img style="width: 480px; height: 270px" src="${Application.accessFileUrl!}${proofing.mainImage!}"/></span>
                                    </td>
                                    <td width="50%">
                                        <table class="table table-bordered">
                                            <tr>
                                                <th>颜色</th>
                                                <th>XS</th>
                                                <th>S</th>
                                                <th>M</th>
                                                <th>L</th>
                                                <th>XL</th>
                                                <th>总计</th>
                                            </tr>
                                            <#list proofing.proofingPatternSizes as proofingPatternSize>
                                            <tr>
                                                <td>${proofingPatternSize.color!}</td>
                                                <td>${proofingPatternSize.xsAmount!}</td>
                                                <td>${proofingPatternSize.sAmount!}</td>
                                                <td>${proofingPatternSize.mAmount!}</td>
                                                <td>${proofingPatternSize.lAmount!}</td>
                                                <td>${proofingPatternSize.xlAmount!}</td>
                                                <td name="total">1</td>
                                            </tr>
                                            </#list>
                                            <tr>
                                                <td colspan="8"  class="right-text">
                                                    <span class="pull-right">共<span id="count">1</span>件</span>
                                                </td>
                                            </tr>
                                        </table>
                                        <table style="width: 100%;">
                                            <td colspan="8">
                                                <table class="table table-bordered">
                                                    <tr>
                                                        <td width="30%">设计款式说明</td>
                                                        <td width="70%">
                                                        	${proofing.description!}
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </table>
                                    </td>
                                </table>
                                <div class="pull-left" name="detail">款式细节明细</div>
                                ${proofing.detailDescription!}
                                
                                <div class="pull-left" name="detail">面辅料明细</div>
                                ${proofing.accessoryDetail!}
                                
                                <div class="pull-left">折叠包装方法</div>
                                <table class="table table-bordered">
                                    <tr>
                                        <td width="15%" class="text-center">折叠方法</td>
                                        <td width="35%" class="p_left">${proofing.foldMethod!}</td>
                                        <td width="15%" class="text-center">包装方法</td>
                                        <td width="35%" class="p_left">${proofing.packageMethod!}</td>
                                    </tr>
                                </table>
                                <div class="pull-left">验货</div>
                                <table class="table table-bordered">
                                    <tr>
                                        <td width="15%" class="text-center">批版方法</td>
                                        <td width="35%">${proofing.batchMethod!}</td>
                                        <td width="15%" class="text-center">验货标准</td>
                                        <td width="35%">${proofing.checkStandard!}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-center">测试要求</td>
                                        <td colspan="3" style="text-align: left;">${proofing.testRequest!"/"}</td>
                                    </tr>
                                </table>
                                <div class="pull-left">备注</div>
                                <div class="pull-left" style="border: 1px solid #ccc; width: 100%; padding: 10px; margin: 0 0 20px 0; font-weight: normal">
                                    ${proofing.memo!}
                                </div>
                                <div class="clearfix">
                                	<a href="fillNotice?ids=${ids!}&index=${proofing_index}&proofingOrderId=${proofingOrder.proofingOrderId!}" class="btn btn-default btn-sm" style="float:left">返回修改</a>
                                	<#if proofingPatterns?size==1>
                                    <a href="#" class="btn btn-primary btn-sm pull-right" id="sure">提交</a>
                                    <#else>
                                    <a href="#" class="btn btn-primary btn-sm pull-right" id="sure">共${proofing_index+1}/${proofingPatterns?size}款，提交
                                	<!-- <#if proofing_index+1==proofingPatterns?size>
                                	确定
                                	<#else>
                                	预览下一款
                                	</#if> -->
                                	</a>
                                    </#if>
                                	<a href="#" class="btn btn-primary btn-sm pull-right" id="next" style="margin-right: 10px">下一款</a>
                                	<a href="#" class="btn btn-primary btn-sm pull-right" id="last" style="margin-right: 10px">上一款</a>
                                </div>
                            </form>
							</#list>
                        </div>
                    </div>
                </div>
            </div>
        </section>
</div><!-- ./wrapper -->

<!-- Bootstrap -->
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="../js/AdminLTE/app.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="../js/html2canvas.js" type="text/javascript"></script>
<script src="../js/sweet-alert.min.js" type="text/javascript"></script>
<script src="../js/sweetAlert.js" type="text/javascript"></script>
<script src="../js/order/proofing_generate_notice.js" type="text/javascript"></script>
</body>
<script>
	$(function(){
		var boxs=$('form');
		for(var i=0;i<boxs.length;i++){
			var box=boxs.eq(i);
			var tds=box.find('td[name="total"]');
	    	var amount=0;
	    	for(var j=0;j<tds.length;j++){
	    		var sizes=tds.eq(j).prevAll(':not(:last)');
	    		total=0;
	    		for(var k=0;k<sizes.length;k++){
	    			var count=sizes.eq(k).html();
	    			if(count&&!isNaN(count)){
	    				total+=parseInt(count);
	    			}
	    		}
	    		tds.eq(j).html(total);
	    		amount+=total;
	    	}
	    	box.find('#count').html(amount);
		}
	})
	$(function(){
		<#if index??>
		$('form').hide().eq(${index}).show();
		if(${index}==$('form').length-1)
			$('form').eq(${index}).find('#next').hide();
		<#else>
     	$('form:not(:first)').hide();
     	$('form:first').find('#last').hide();
     	</#if>
		for(var i=0;i<$('form').length;i++){
			$('form').eq(i).find('#last').click(showLast);
			if(i!=$('form').length-1)
				$('form').eq(i).find('#next').click(showNext);
		}
		$('form').find('#sure').click(generatePdf).removeAttr('href');
    })
    function showLast(){
    	var form=$(this).parents('form').prev();
    	var index=form.index();
    	if(index==0) form.find('#last').hide();
    	form.find('#next').show();
    	form.show();
    	form.next().hide();
    }
    function showNext(){
		var form=$(this).parents('form').next();
    	var index=form.index();
    	if(index==$('form').length-1) form.find('#next').hide();
    	form.find('#next').next().show();
    	form.show();
    	form.prev().hide();
    	//exportPdf(form,model.id[index],null);
    }
	function generatePdf(){
		confirm('确定生成打样通知单文件？请先确认全部数据已经完整，',function(isConfirm){
			if(isConfirm){
				var url='generateSuccess?id=${proofingOrder.proofingOrderId!}&ids=${ids!}';
				exportPdf($('form'),url);
				$('form').hide();
				$(this).parents('form').show();
			}
		});
	}
	$(function(){
		model.ids='${ids!}';
		if(model.ids){
			model.id=model.ids.split(',');
		}
		if(model.id.length==1){
			$('form').find('#next').hide();
			$('form').find('#last').hide();
		}
	})
</script>
</html>
